<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form label-width="80px">
        <!-- <el-form-item label="考试类型" class="filter-item">
          <el-select
            v-model="listQuery.condition.type"
            style="width: 200px;"
            placeholder="请选择考试类型"
            @keyup.enter.native="handleSearch"
          >
            <el-option
              v-for="item in examTypes"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="字典名称" class="filter-item">
          <el-input
            v-model="listQuery.condition.name"
            placeholder="请输入字典名称"
            style="width: 400px;"
            @keyup.enter.native="handleSearch"
          />
        </el-form-item>
        <!-- <el-form-item label="考试日期" class="filter-item">
          <el-col :span="11">
            <el-date-picker
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="开始日期"
              v-model="listQuery.condition.startTime"
              style="width: 100%;"
              :picker-options="pickerOptionsStart"
            ></el-date-picker>
          </el-col>
          <el-col style="text-align: center" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="结束日期"
              v-model="listQuery.condition.endTime"
              style="width: 100%;"
              :picker-options="pickerOptionsEnd"
            ></el-date-picker>
          </el-col>
        </el-form-item> -->
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleSearch"
        >
          搜索
        </el-button>
        <el-button
          v-waves
          class="filter-item"
          icon="el-icon-refresh-left"
          @click="resetSearch"
        >
          重置
        </el-button>
      </el-form>
    </div>
    <div class="my-table">
      <div class="table-operate">
        <div class="title">数据列表</div>
        <!-- <div class="btns" v-if="hasPerm('admin')">
          <el-button
            class="operate-item"
            style="margin-left: 10px;"
            type="primary"
            icon="el-icon-edit"
            @click="handleCreate"
          >
            新增
          </el-button>
        </div> -->
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        :header-cell-style="headerCellStyle"
        fit
        highlight-current-row
        style="width: 100%;"
        row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        lazy
        :load="load"
      >

        <!-- <el-table-column type="selection" align="center" width="55">
        </el-table-column> -->
        <el-table-column label="序号" type="index" align="center" width="60">
          <template slot-scope="{ row, $index }">
            <span>{{ getIndex($index) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="字典名称">
          <template slot-scope="{ row }">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="键值" align="center" width="140">
          <template slot-scope="{ row }">
            <span>{{ row.key }}</span>
          </template>
        </el-table-column>
        <el-table-column label="键名">
          <template slot-scope="{ row }">
            <span>{{ row.value }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center" width="180">
          <template slot-scope="{ row }">
            <span>{{ row.type }}</span>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center" width="100">
          <template slot-scope="{ row }">
            <span>{{ row.sort }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          v-if="hasPerm('admin')"
          label="操作"
          align="center"
          width="150"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row, $index }">
            <el-button type="primary" size="mini" @click="handleUpdate(row)">
              编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(row, $index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageIndex"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />

    <!-- form -->
    <FormDialog ref="tableForm" @afterSubmit="afterSubmit" />
  </div>
</template>

<script>
import waves from "@/directive/waves"; // waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination";
import baseMixin from "@/mixins/list";
import FormDialog from "./modules/FormDialog";
import request from '@/utils/request'

export default {
  name: "DictIndex",
  components: { Pagination, FormDialog },
  directives: { waves },
  mixins: [baseMixin],
  data() {
    return {
      sortOptions: [
        { label: "ID Ascending", key: "+id" },
        { label: "ID Descending", key: "-id" }
      ],
      Urls: {
        listUrl: "/api/dict/page",
        delUrl: "/api/exam/delete/",
        subListUrl: '/api/dict/children/'
      },
      examTypes: [
        {
          key: 'SAFETY_NEW',
          value: '安管人员新办'
        },
        {
          key: 'SAFETY_DELAY',
          value: '安管人员延期'
        },
        {
          key: 'SPECIAL_EQP',
          value: '特种设备'
        },
      ],
      baseParam: {
        parentId: '0'
      },
    };
  },
  created() {
    delete this.baseParam.isLeaf
    this.getList();
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    sortChange(data) {
      const { prop, order } = data;
      console.log("sort", data);
      if (prop === "id") {
        this.sortByID(order);
      }
    },
    sortByID(order) {
      if (order === "ascending") {
        this.listQuery.sort = "+id";
      } else {
        this.listQuery.sort = "-id";
      }
      this.handleFilter();
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}` ? "ascending" : "descending";
    },
    getTypeDesc(type) {
      let desc = ''
      if (type) {
        for (var i = 0; i < this.examTypes.length; i++) {
          if (this.examTypes[i].key === type) {
            desc = this.examTypes[i].value
            break
          }
        }
      }
      return desc
    },
    // 加载列表数据-分页
    getList(arg) {
      if (arg === 1) {
        this.listQuery.pageIndex = 1;
      };
      this.listQuery.condition = Object.assign({}, this.baseParam, this.listQuery.condition)
      this.listLoading = true;
      request({
        url: this.Urls.listUrl,
        method: 'post',
        data: this.listQuery
      }).then(res => {
        this.listLoading = false
        if (res.code == 0) {
          this.list = []
          this.total = res.data.total;
          let newList = res.data.list || [];
          newList.forEach(item => {
            item.hasChildren = item.isLeaf == 0?true: false
            item.isLoading = item.isLeaf == 0?true: false
            this.list.push(item)
          })
          console.log(this.list)
        } else {
          this.$notify.error({
            message: res.msg
          })
        }
      }).catch(() => {
        this.listLoading = false;
      })
    },
    load(tree, treeNode, resolve) {
      const id = tree.id
      const data = this.list
      request({
        url: this.Urls.subListUrl + id,
        method: 'get'
      }).then(res => {
        if (res.code == 0) {
          const children = res.data.records || []
          children.forEach(item => {
            item['hasChildren'] = item.isLeaf == 0?true:false
          })
          treeNode.loaded = true
          resolve(children)
        } else {

        }
      })
    },
  }
};
</script>
